<template>
  <div>
    <el-table :data="managers" border style="width: 890px" class="centerdiv">
      <el-table-column prop="managerId" label="管理员ID" width="200"></el-table-column>
      <el-table-column prop="managerName" label="管理员姓名" width="120"></el-table-column>
      <el-table-column prop="managerPhone" label="管理员联系方式" width="150"></el-table-column>
      <el-table-column prop="managerPow" label="管理员权限" width="220"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row.managerId)">修改</el-button>
          <el-button type="primary" @click="todelete(scope.row.managerId)">删除</el-button>
          <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <span>确认删除访客记录吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteById(pro_id)">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 0 auto; 
    width:750px;
    border-width:5px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[1 , 10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      pro_id: "",
      managers: [
        {
          managerId: "123", //aoto
          managerName: "sss",
          managerPhone: "13245678900",
          managerPow: "4"
        }
      ],
      page: {
        size: 10,
        current: 1,
        total: 5
      }
    };
  },
  methods: {
    //分页
    handleSizeChange(val) {
      //分页的标记数，一页有多少数据。
      this.page.size = val;
      this.axios
        .post("managers/managerspage", this.page)
        .then(res => {
          console.log(res);
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.managers = res.data.records;
        })
        .catch(err => {
          console.error(err);
        });
      console.log(val);
    },
    handleCurrentChange(val) {
      //当前是第几页
      this.page.current = val;
      this.axios
        .post("managers/managerspage", this.page)
        .then(res => {
          console.log(res);
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.managers = res.data.records;
        })
        .catch(err => {
          console.error(err);
        });
      console.log(val);
    },
    edit(row) {
      this.$router.push({
        //传参用router，接参用route
        path: "/index_manager/updatamanager",
        query: {
          id: row
        }
      });
      console.log(row);
    },
    deleteById(row) {
      //进行删除操作，delete方法
      this.centerDialogVisible = false;
      this.axios
        .post("http://localhost:8181/managers/deletemanagers?managersId=" + row)
        .then(res => {
          console.log(res);
          if (res.data == "success") {
            this.$message({
              message: "已成功删除！！！",
              type: "warning"
            });
            window.location.reload();
          }
        })
        .catch(err => {
          console.error(err);
        });
      console.log(row);
    },
    todelete(index) {
      this.centerDialogVisible = true;
      this.pro_id = index;
    }
  },
  created() {
    if (this.$route.query.keyword == null) {
      this.axios
        .post("http://localhost:8181/managers/managerspage", this.page)
        .then(res => {
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.managers = res.data.records;
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
    } else {
      //查找
      this.axios
        .post(
          "http://localhost:8181/managers/searchmanagers?keyword=" +
            this.$route.query.keyword
        )
        .then(res => {
          if (res.data[0] != null) {
            this.managers = res.data;
            console.log(res);
          } else {
            this.$alert("查无此人", "查找", {
              confirmButtonText: "确定",
              callback: action => {
                this.axios
                  .post("http://localhost:8181/managers/managerspage", this.page)
                  .then(res => {
                    this.page.total = res.data.total;
                    this.page.size = res.data.size;
                    this.page.current = res.data.current;
                    this.managers = res.data.records;
                  })
                  .catch(err => {
                    console.error(err);
                  });
              }
            });
          }
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  components: {}
};
</script>

<style scope>
.showdiv {
  border: solid 1px #df1111;
}
.centerdiv {
  margin: auto;
  text-align: center;
}
</style>
